<template>
    <div class="productSizeContent u-skeleton">

        <u-skeleton 
			:loading="loading" 
			:animation="true" 
			bgColor="#FFF"
		></u-skeleton>

        <div class="content">
            <div class="descTitle u-skeleton-fillet">
                物件信息 <div class="tips">必选</div>
            </div>
            <radio-group @change="radioChange">
                <div class="list">

                    <label 
                        class="it" 
                        v-for="(it,i) in packCategories"
                        :key="i"
                    >
                        <div class="left" :class="{rowLineStyle:pageType===`view`}">
                            <div class="title u-skeleton-fillet">
                                {{i+1}}、{{myPackStore.packTypeToStr([it.pack_type])}}，{{it.pack_title}}
                            </div>
                            <div class="desc u-skeleton-fillet">{{it.pack_desc}}</div>
                            <div class="money u-skeleton-fillet">
                                基础收费：￥{{it.moeny}}/件
                            </div>
                            <div class="money addMoney u-skeleton-fillet">
                                加急收费 <span class="smallText">(额外收费)</span>： ￥{{it.add_money}}/件
                            </div>
                        </div>
                        <div class="right" v-if="pageType===`select`">
                            <radio :value="it._id" class="myRadio u-skeleton-fillet" color="#f37000" />
                        </div>
                    </label>
                </div>
            </radio-group>

            <div class="noteBox u-skeleton-fillet">
                提示：如果是易碎物请及时与跑腿员联系，或者通过备注告知。超大物件按实际收费，可通过与跑腿员补差价完成。费用标准会按节假日、恶劣等天气变更，请熟知！
            </div>

        </div>

        <div class="bottomBox" v-if="pageType===`select`">
                <div class="confimBtn u-skeleton-fillet" @click="confimSelect" :class="{disabledBtn:checkId==''}">
                    选好了
                </div>
            </div>

    </div>
</template>

<script src="./productSize.ts"></script>

<style lang="stylus" scoped>
@import './productSize.styl';
</style>
